<template>
  <van-nav-bar
    safe-area-inset-top
    :fixed="true"
    :border="true"
    class="custom_navbar_public"
    :class="item.transparent ? 'transparent' : ''"
  >
    <template #left>
      <van-icon name="arrow-left" @click="goBackClickHandle" />
    </template>
    <template #title v-if="!item.transparent">
      <router-link :to="{ name: 'home' }" class="custom_navbar_public_logo">
        <img :src="image" v-lazy="image" />
      </router-link>
      <div class="page_header_title">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value" :options="options" />
        </van-dropdown-menu>
        <span class="page_header_title_panel" @click="titleClickHandle">{{
          $t("lang." + $route.meta.title)
        }}</span>
      </div>
    </template>
    <template #right>
      <van-icon name="setting-o" v-if="/\/me/.test($route.path)"></van-icon>
      <van-icon name="share-o" v-if="/\/video/.test($route.path)"></van-icon>
    </template>
  </van-nav-bar>
</template>
<script>
import { Toast } from "vant";
export default {
  name: "navbar",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      image: "https://router.vuejs.org/icons/apple-touch-icon-152x152.png",
      value: this.$i18n.locale,
      options: [
        { text: this.$t("lang.简体中文"), value: "zh" },
        { text: this.$t("lang.英文"), value: "en" },
      ],
    };
  },
  watch: {
    value(v) {
      //this.$i18n.locale = v;
      localStorage.setItem("locale", v);
      Toast.loading({
        message: this.$t("lang.语言切换中"),
        forbidClick: true,
        loadingType: "spinner",
      });
      this.timeout = setTimeout(() => window.location.reload(), 2000);
    },
  },
  methods: {
    titleClickHandle() {
      window.scrollTo(0, 0);
    },
    goBackClickHandle() {
      this.$parent.$emit("goBackClickHandle");
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_navbar_public {
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
  z-index: 999;
  .custom_navbar_public_logo {
    vertical-align: middle;
    width: (30 / @base);
    height: (30 / @base);
    overflow: hidden;
    display: block;
    margin: (8 / @base) (5 / @base);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .van-dropdown-menu {
    .van-dropdown-menu__bar {
      height: (45 / @base);
      box-shadow: none;
      margin: 0 (20 / @base) 0 0;
      .van-dropdown-menu__title {
        font-size: (12 / @base);
        border-left: (1 / @base) solid #efefef;
        color: #999;
      }
    }
  }
  .van-dropdown-item {
    .van-cell {
      font-size: (12 / @base);
    }
  }
  .van-icon {
    font-size: (18 / @base);
  }
  .page_header_title {
    display: flex;
    .page_header_title_panel {
      font-size: (14 / @base);
      margin: (12 / @base) 0;
      padding: 0 0 0 (5 / @base);
    }
  }
  &.van-nav-bar {
    background-color: #fff;
    .van-nav-bar__content {
      .van-icon {
        font-size: (18 / @base);
        color: #333;
      }
      .van-nav-bar__title {
        margin: 0 0 0 (60 / @base);
        display: flex;
      }
    }
  }
  &.transparent {
    background-color: transparent;
    .van-nav-bar__content {
      .van-icon {
        color: #fff;
      }
    }
    &.van-hairline--bottom::after {
      border: 0;
    }
  }
}
</style>
